<template>
  <div class="col-xl-6 box-col-12 des-xl-100 top-dealer-sec">
    <div class="card">
      <div class="card-header pb-0">
        <div class="
            header-top
            d-sm-flex
            justify-content-between
            align-items-center
          ">
          <h5>Top Dealer</h5>
          <div class="center-content">
            <p class="d-sm-flex align-items-center">
              <span class="m-r-10">845 Dealer</span><i
                class="toprightarrow-primary fa fa-arrow-up m-r-10 d-grid"></i>86%
              More Than Last Year
            </p>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="swiper">
          <div class="swiper-content">
            <div class="swiper-content2">
              <swiper :space-between="20" :pagination="{
                clickable: true,
              }" :modules="modules">
                <swiper-slide v-for='(slides, index) in allSlides' :key="index">
                  <div class="swiper-body">
                    <div class="item">
                      <div class="row item1">
                        <div class="col-12 ">
                          <div class="row">
                            <div class="col-xl-3" v-for="card in cards" :key="card">
                              <div class="item2">
                                <div class="card">
                                  <div class="top-dealerbox text-center">
                                    <img class="card-img-top" :src="getImageUrl(card.src1)" alt="..." />
                                    <h6>{{ card.name }}</h6>
                                    <p>{{ card.name1 }}</p>
                                    <router-link to="/pages/social-app" class="btn btn-rounded">View More</router-link>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-12">
                          <div class="swiper-card row">
                            <div class="swiper-card2 col-xl-3" v-for="card in cards1" :key="card">
                              <div class="item2">
                                <div class="card">
                                  <div class="top-dealerbox text-center">
                                    <img class="card-img-top" :src="getImageUrl(card.src1)" alt="..." />
                                    <h6>{{ card.name }}</h6>
                                    <p>{{ card.name1 }}</p>
                                    <router-link to="/pages/social-app" class="btn btn-rounded">View More</router-link>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </swiper-slide>
                <swiper-slide>
                  <div class="swiper-body">
                    <div class="item">
                      <div class="row item1">
                        <div class="col-12">
                          <div class="swiper-card">
                            <div class="swiper-card2" v-for="card in cards" :key="card">
                              <div class="item2">
                                <div class="card">
                                  <div class="top-dealerbox text-center">
                                    <img class="card-img-top" :src="getImageUrl(card.src1)" alt="..." />
                                    <h6>{{ card.name }}</h6>
                                    <p>{{ card.name1 }}</p>
                                    <router-link to="/pages/social-app" class="btn btn-rounded">View More</router-link>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-12">
                          <div class="swiper-card">
                            <div class="swiper-card2" v-for="card in cards1" :key="card">
                              <div class="item2">
                                <div class="card">
                                  <div class="top-dealerbox text-center">
                                    <img class="card-img-top" :src="getImageUrl(card.src1)" alt="..." />
                                    <h6>{{ card.name }}</h6>
                                    <p>{{ card.name1 }}</p>
                                    <router-link to="/pages/social-app" class="btn btn-rounded">View More</router-link>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </swiper-slide>
                <swiper-slide>
                  <div class="swiper-body">
                    <div class="item">
                      <div class="row item1">
                        <div class="col-12">
                          <div class="swiper-card">
                            <div class="swiper-card2" v-for="card in cards" :key="card">
                              <div class="item2">
                                <div class="card">
                                  <div class="top-dealerbox text-center">
                                    <img class="card-img-top" :src="getImageUrl(card.src1)" alt="..." />
                                    <h6>{{ card.name }}</h6>
                                    <p>{{ card.name1 }}</p>
                                    <router-link to="/pages/social-app" class="btn btn-rounded">View More</router-link>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-12">
                          <div class="swiper-card">
                            <div class="swiper-card2" v-for="card in cards1" :key="card">
                              <div class="item2">
                                <div class="card">
                                  <div class="top-dealerbox text-center">
                                    <img class="card-img-top" :src="getImageUrl(card.src1)" alt="..." />
                                    <h6>{{ card.name }}</h6>
                                    <p>{{ card.name1 }}</p>
                                    <router-link to="/pages/social-app" class="btn btn-rounded">View More</router-link>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </swiper-slide>
                <swiper-slide>
                  <div class="swiper-body">
                    <div class="item">
                      <div class="row item1">
                        <div class="col-12">
                          <div class="swiper-card">
                            <div class="swiper-card2" v-for="card in cards" :key="card">
                              <div class="item2">
                                <div class="card">
                                  <div class="top-dealerbox text-center">
                                    <img class="card-img-top" :src="getImageUrl(card.src1)" alt="..." />
                                    <h6>{{ card.name }}</h6>
                                    <p>{{ card.name1 }}</p>
                                    <router-link to="/pages/social-app" class="btn btn-rounded">View More</router-link>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-12">
                          <div class="swiper-card">
                            <div class="swiper-card2" v-for="card in cards1" :key="card">
                              <div class="item2">
                                <div class="card">
                                  <div class="top-dealerbox text-center">
                                    <img class="card-img-top" :src="getImageUrl(card.src1)" alt="..." />
                                    <h6>{{ card.name }}</h6>
                                    <p>{{ card.name1 }}</p>
                                    <router-link to="/pages/social-app" class="btn btn-rounded">View More</router-link>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </swiper-slide>

              </swiper>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { Swiper, SwiperSlide } from "swiper/vue";


import "swiper/css";

import "swiper/css/pagination";


import { Pagination } from "swiper";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      allSlides: [1, 2, 3, 4, 5],
      cards: [
        { id: "1", src1: "1.png", name: "Thompson lee", name1: "Malasiya" },
        { id: "1", src1: "8.png", name: "Johnson allon", name1: "Bangladesh" },
        { id: "1", src1: "3.png", name: "williams reed", name1: "Belgium" },
        { id: "1", src1: "4.png", name: "Jones king", name1: "Canada" },
      ],
      cards1: [
        { id: "1", src1: "5.png", name: "Brown davis", name1: "China" },
        { id: "1", src1: "6.png", name: "Wilson Hill", name1: "Denmark" },
        { id: "1", src1: "7.png", name: "Anderson ban", name1: "Japan" },
        { id: "1", src1: "8.png", name: "Thompson lee", name1: "Malasiya" },
      ],
    };
  },
  methods: {
    getImageUrl(path) {
      return require("../../../assets/images/dashboard-2/" + path);
    },
  },
  setup() {
    return {
      modules: [Pagination],
    };
  },
};
</script>
